<template>
  <div class="flex leftTime">
    <el-input-number class="leftTime__input" size="mini" :min="0" v-model="days" :controls="false"/>
    <span class="leftTime__sep">天</span>
    <el-input-number class="leftTime__input" size="mini" :min="0" v-model="hour" :controls="false"/>
    <span class="leftTime__sep">时</span>
    <el-input-number class="leftTime__input" size="mini" :min="0" v-model="minutes" :controls="false"/>
    <span class="leftTime__sep">分</span>
    <el-input-number class="leftTime__input" size="mini" :min="0" v-model="seconds" :controls="false"/>
    <span class="leftTime__sep">秒</span>
  </div>
</template>

<script>
export default {
  name: "LeftTime",
  data() {
    return {
      days: 0,
      hour: 0,
      minutes: 0,
      seconds: 0
    }
  },
  created() {
    this.calc()
  },
  watch: {
    value() {
      this.calc()
    },
    days() {
      this.notify()
    },
    hour() {
      this.notify()
    },
    minutes() {
      this.notify()
    },
    seconds() {
      this.notify()
    }
  },
  props: {
    value: {
      type: [String, Number],
      default: 0
    }
  },
  methods: {
    notify() {
      const seconds = this.days * 24 * 60 * 60 + this.hour * 60 * 60 + this.minutes * 60 + this.seconds
      this.$emit('input', seconds)
    },
    calc() {
      console.log('ccc')
      console.log(this.value)
      if (this.value <= 0) {
        this.days = 0
        this.hour = 0
        this.minutes = 0
        this.seconds = 0
      } else {
        const leftSeconds = this.value

        this.days = parseInt(leftSeconds / 60 / 60 / 24)
        this.hour = parseInt(leftSeconds / 60 / 60 % 24)
        this.minutes = parseInt(leftSeconds / 60 % 60)
        this.seconds = parseInt(leftSeconds % 60)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.leftTime {
  &__sep {
    font-size: 12px;
    text-align: center;
    width: 20px;
  }

  &__input {
    width: 50px;
    padding: 0;
  }
}

::v-deep .el-input-number.is-without-controls .el-input__inner {
  padding-left: 0;
  padding-right: 0;
}
</style>
